<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子/函数</title>

</head>
<body>

<div id="app">
    <div>
        城市： <select>
        <option v-for="city in cities" :value="city.id">{{city.name}}</option>
    </select>
    </div>
</div>

</body>
<script src="../../lib/vue.global.js"></script>
<script src="../mock/cities.js"></script>
<script>

    /**
     *  create --- mount ---update --- unmount
     *
     *  页面初始化 发生在 mounted中
     *      vue实例创建---数据存在初值
     *      挂载---vue实例中的数据(初值)渲染到页面模版上
     *      外界的值 改变vue中的数据，重新渲染页面
     *
     *  页面初始化 发生在 created中
     *       vue实例创建---数据存在初值
     *       外界的值 改变vue中的数据
     *       挂载-- vue实例中的数据(被改变过的)渲染到页面上
     * **/

    var app = Vue.createApp({
        data: function () {
            return {cities: []}
        },mounted:function (){
            // 页面初始化
          //  this.cities = cities;
        },
        created:function (){
            this.cities = cities;
        }
    });

    app.mount('#app')

</script>
</html>